<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- 
        action 表单提交数据的地址(一般是后端接口地址,接收数据)
        method 提交数据的方式 get/post

        以get方式提交数据时,会将参数数据队列(键值对:user=a123123&pwd=123123&phone=17386141517&email=wlc1272071495%40gmail.com)提交到action所指的url之后 用?分隔\

        get提交和post提交的区别?
            (1) get是向服务器获取/查询数据的一种请求，post是向服务器提交数据的一种请求。
            (2)  以get方式提交数据时,会将参数数据队列提交到action所指的url之后 用?分隔 => 在地址栏可见
                以post方式提交数据时, 利用http post机制,将参数数据队列存放在请求主体中(body),传递给后端 => 在地址栏不可见

            (3) get方式传递数据,在地址栏可见, 安全性比较低, post安全性较高
            (4) get提交数据时, 速度比较快, post效率较低
            (5) get提交数据时, 一般不能超过4k, post默认不受限制



     -->
    <form action="https://www.baidu.com" method="get">
        <div class="input-group">
            <lable>用户名:</lable>
            <input type="text" name="user">
        </div>
        <div class="input-group">
            <lable>密&emsp;码:</lable>
            <input type="text" name="pwd">
        </div>
        <div class="input-group">
            <lable>手机号:</lable>
            <input type="text" name="phone">
        </div>
        <div class="input-group">
            <lable>邮&emsp;箱:</lable>
            <input type="text" name="email">
        </div>
        <div class="input-group">
            <input type="submit" class="btn" value="注册">
        </div>
    </form>
</body>
<script>

    // 参数数据解析

    // 方法1: 字符串拆分解析   => {a:1,b:2,c:3,d:4}
    // var str = "a=1&b=2&c=3&d=4";
    
    // var list = str.split("&"); 
    // console.log(list);  // ['a=1', 'b=2', 'c=3', 'd=4']

    // // 遍历数组 依次解析数组中的每项数据
    // var data = {}
    // for(var i=0;i<list.length;i++){
    //     var item = list[i]; //  'a=1'
    //     var key = item.split("=")[0];// "a"  "b"
    //     var val = item.split("=")[1]; // 1    2
    //     console.log(item,key,val);

    //     data[key] = val; // data["a"] = 1
    // }

    // console.log(data);


    // 方法2: 正则匹配(exec)

    var str = "a=1-1&b=2&c=3&d=4";
    // var reg = /(\w+)=(\w+)/g;
    var reg = /([^&=]+)=([^&]+)/g;

    // console.log(reg.exec(str));
    // console.log(reg.exec(str));
    // console.log(reg.exec(str));
    // console.log(reg.exec(str));
    // console.log(reg.exec(str));

    var result = null;
    var data = {};
    while(result = reg.exec(str)){
        console.log(result);
        var key = result[1];
        var val = result[2];
        data[key] = val;
    }
    console.log(data);



</script>

</html>